<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>权限配置</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/component/layui/css/layui.css" />
    <script src="/component/layui/layui.js"></script>
    <script src="/component/pear/pear.js"></script>
    <script src="/component/layui/lay/extends/authtree.js"></script>
</head>
<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div id="power-tree"></div>
                </div>
                <div class="bottom">
                    <div class="button-container">
                        <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="power-save">
                            <i class="layui-icon layui-icon-ok"></i>
                            提交
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['form', 'jquery', 'popup', 'authtree'], function() {
            let form = layui.form;
            let $ = layui.jquery;
            let popup = layui.popup;
            let authtree = layui.authtree;

            let roleId = getUrlParam("id");

            // 获取所有权限并生成树
            $.ajax({
                url: '/api/menu/tree',
                dataType: 'json',
                type: 'get',
                success: function(result) {
                    if (result.code == 0) {
                        // 渲染时勾选已有权限
                        $.ajax({
                            url: '/api/role/permissions/' + roleId,
                            dataType: 'json',
                            type: 'get',
                            success: function(res) {
                                if (res.code == 0) {
                                    authtree.render('#power-tree', result.data, {
                                        inputname: 'ids[]',
                                        layfilter: 'lay-check-auth',
                                        openall: true,
                                        autowidth: true,
                                        checkedIds: res.data
                                    });
                                }
                            }
                        });
                    }
                }
            });

            form.on('submit(power-save)', function(data) {
                let loading = layer.load();
                // 获取选中的权限ID
                let ids = authtree.getChecked('#power-tree');
                $.ajax({
                    url: '/api/role/assignPermissions',
                    data: JSON.stringify({
                        roleId: roleId,
                        permissionIds: ids
                    }),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    success: function(result) {
                        layer.close(loading);
                        if (result.code == 0) {
                            popup.success(result.msg, function() {
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                            });
                        } else {
                            popup.failure(result.msg);
                        }
                    }
                })
                return false;
            });
        });

        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
    </script>
    <style>
    .auth-single {
        padding: 5px 0;
    }
    .auth-child {
        padding-left: 30px;
    }
    .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0 -1px 4px rgba(0,21,41,.08);
    }
    .button-container {
        text-align: center;
        padding: 10px 0;
    }
    .layui-btn {
        padding: 0 25px;
        height: 35px;
        line-height: 35px;
    }
    .layui-card-body {
        padding-bottom: 60px;
    }
    </style>
</body>
</html> 